<template>
    <div class="userKeywordListContainer">
        <!--头部面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>测试执行</el-breadcrumb-item>
            <el-breadcrumb-item>测试组件</el-breadcrumb-item>
        </el-breadcrumb>

        <!--查询卡片-->
        <el-card class="box-card ">
            <el-form :inline="true" :model="queryUserKeywordForm" class="queryUserKeywordForm">
                <el-form-item label="组件名">
                    <el-input v-model="queryUserKeywordForm.name" placeholder="组件名"></el-input>
                </el-form-item>
                <el-form-item label="测试项目">
                    <el-input v-model="queryUserKeywordForm.projectId" placeholder="测试项目"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="queryUserKeywordForm.description" placeholder="描述"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" icon="el-icon-search" @click="getUserKeywordList()">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-button type="primary" @click="newUserKeyword()">
            新增
        </el-button>


        <el-button @click="logCurrentUK">
            查看currentUK
        </el-button>

        <!--表格-->
        <el-card class="box-card">
            <el-table
                    :data="userKeywordList"
                    border
                    style="width: 100%">
                <el-table-column
                       type="index"
                        label="序号"
                        width="60px">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="组件名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="projectId"
                        label="所属项目"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="组件功能描述">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="editUserKeyword(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteAnUK(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <!--组件编辑或新增对话框-->
        <el-dialog :visible.sync="dialogUKeditFormVisible" modal :close-on-click-modal="false" center
        width="60%" fullscreen @closed="whenDialogClosed" custom-class="ukDialog" title="测试组件">
            <el-form :model="currentUser" ref="UkDialogFormRef" >
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-row>
                            <el-form-item  prop="id" style="display: none">
                            </el-form-item>
                            <el-form-item label="组件名称" prop="name">
                                <el-input v-model="currentUser.name" placeholder="组件英文名称"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="所属项目" prop="projectId">
                                <el-input v-model="currentUser.projectId" placeholder="所属项目"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="组件描述" prop="description">
                                <el-input
                                        type="textarea"
                                        :rows="15"
                                        placeholder="描述组件的功能"
                                        v-model="currentUser.description">
                                </el-input>
                            </el-form-item>
                        </el-row>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="组件脚本" prop="code">
                            <el-input
                                    type="textarea"
                                    :rows="26"
                                    v-model="currentUser.code">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUKeditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUpdateUserKeyword()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "UserKeyword",
        created() {
            this.getUserKeywordList();
        },
        data(){
            return {
                /*user表格数据查询表单对象*/
                queryUserKeywordForm:{
                  name:'',
                  projectId:'',
                  description:'',
                },

                /*表格数据*/
                userKeywordList:[],

                /*对话模框显示开关*/
                dialogUKeditFormVisible:false,

                /*user容器，放入对话框中，在新增user和编辑user时存储表单数据*/
                currentUser:{
                    id:'',
                    name:'',
                    projectId:'',
                    description:'',
                    /*新增组件时给code设置默认值*/
                    code:'*** Settings ***\n' +
                        'Library    Selenium2Library\n' +
                        'Library    AppiumLibrary\n' +
                        '\n' +
                        '*** Keywords ***\n' +
                        'ReplaceKeywordName\n' +
                        '\t[Arguments]    ${arg1}'
                },

            }
        },
        methods:{
            async getUserKeywordList(){
                const {data:res}= await this.$http.post('UserKeyword/getList',this.queryUserKeywordForm);

                if(res.status != 200){
                    return this.$message.error('获取组件列表失败')
                }
                this.userKeywordList=res.data;
            },
            editUserKeyword(uk){
                /*uk为当前选中的组件*/
                this.currentUser.id = uk.id;
                this.currentUser.name = uk.name;
                this.currentUser.projectId = uk.projectId;
                this.currentUser.description = uk.description;
                this.currentUser.code = uk.code;

                this.dialogUKeditFormVisible = !this.dialogUKeditFormVisible;
            },

            /*关闭dialog时重置currentUser*/
            whenDialogClosed(){
                this.$refs.UkDialogFormRef.resetFields();

                /*鉴于表单重置不好用，硬处理*/
                this.currentUser={
                    id:'',
                    name:'',
                    projectId:'',
                    description:'',
                    /*新增组件时给code设置默认值*/
                    code:'*** Settings ***\n' +
                        'Library    Selenium2Library\n' +
                        'Library    AppiumLibrary\n' +
                        '\n' +
                        '*** Keywords ***\n' +
                        'ReplaceKeywordName\n' +
                        '\t[Arguments]    ${arg1}'
                };
            },
            /*新增组件*/
            newUserKeyword(){
                this.dialogUKeditFormVisible = !this.dialogUKeditFormVisible;
            },
            logCurrentUK(){
                this.$message.info('current user id is:'+this.currentUser.id.toString())
            },

            /*新增或编辑uk,统一用这个方法和接口上传*/
            async submitUpdateUserKeyword(){
                /*提交userkeyword到后台*/
                const {data:res} =  await this.$http.post('UserKeyword/update', this.currentUser);
                if(res.status === 200){
                    this.$message.success('组件保存成功')

                    /*刷新列表*/
                    this.getUserKeywordList();
                    this.dialogUKeditFormVisible = false;
                    return;
                }else{
                    this.$message.error('组件保存失败')
                }

            },

            /*delete an uk*/
            deleteAnUK(id){
                this.$confirm('此操作将删除该组件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {

                    const {data:res} = await this.$http.get('UserKeyword/deleteOne'+'?id='+id);

                    if(res.status === 200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getUserKeywordList()
                    }else{
                        this.$message.error('删除组件失败！')
                    }


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>

<style lang="less" scoped>
.queryUserKeywordForm{
    display: flex;
    justify-content: center;
    padding-top: 10px;
}



</style>